<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>钱包支付确认</p>
		</header>

		<!-- 订单信息确认 -->
		<div class="order-confirm">
			<div class="section-header">
				<i class="fa fa-file-text-o"></i>
				<h3>订单信息</h3>
			</div>
			<div class="order-info">
				<div class="info-item">
					<div class="info-label">
						<i class="fa fa-hashtag"></i>
						<span>订单号</span>
					</div>
					<span class="info-value">{{ orderData.id || '未知' }}</span>
				</div>
				<div class="info-item">
					<div class="info-label">
						<i class="fa fa-store"></i>
						<span>商家</span>
					</div>
					<span class="info-value">{{ orderData.business?.businessName || '未知' }}</span>
				</div>
				<div class="info-item highlight">
					<div class="info-label">
						<i class="fa fa-money"></i>
						<span>订单金额</span>
					</div>
					<span class="amount">¥{{ orderData.orderTotal?.toFixed(2) || '0.00' }}</span>
				</div>
			</div>
		</div>

		<!-- 钱包余额信息 -->
		<div class="wallet-info">
			<div class="section-header">
				<i class="fa fa-credit-card"></i>
				<h3>支付方式</h3>
			</div>
			<div class="payment-info">
				<div class="payment-method-card">
					<div class="wallet-icon">
						<i class="fa fa-wallet"></i>
					</div>
					<div class="payment-details">
						<div class="payment-title">电子钱包支付</div>
						<div class="balance-info">
							<span class="balance-label">可用余额</span>
							<span class="balance-amount">¥{{ availableBalance.toFixed(2) }}</span>
							<span v-if="isVipUser && walletData.balance < 0" class="overdraft-tag">(含透支额度)</span>
						</div>
						<div v-if="isVipUser" class="overdraft-info">
							<span class="overdraft-label">透支额度</span>
							<span class="overdraft-amount">¥1000.00</span>
						</div>
					</div>
					<div class="payment-check">
						<i class="fa fa-check-circle"></i>
					</div>
				</div>
			</div>
		</div>

		<!-- 余额不足提示（仅在不支持透支或透支额度也不足时显示） -->
		<div v-if="isInsufficientBalance" class="insufficient-balance">
			<div class="warning-icon">
				<i class="fa fa-exclamation-triangle"></i>
			</div>
			<h3>余额不足</h3>
			<p v-if="!isVipUser">您的钱包余额不足以支付此订单，请先充值</p>
			<p v-else>您的钱包余额和透支额度不足以支付此订单，请先充值</p>
			<div class="balance-comparison">
				<div class="comparison-item">
					<span>需要支付</span>
					<span class="need-amount">¥{{ orderData.orderTotal?.toFixed(2) || '0.00' }}</span>
				</div>
				<div class="comparison-item">
					<span>当前余额</span>
					<span class="current-amount">¥{{ walletData.balance?.toFixed(2) || '0.00' }}</span>
				</div>
				<div v-if="isVipUser" class="comparison-item">
					<span>透支额度</span>
					<span class="overdraft-amount-display">¥1000.00</span>
				</div>
				<div class="comparison-item deficit">
					<span>差额</span>
					<span class="deficit-amount">¥{{ ((orderData.orderTotal || 0) - availableBalance).toFixed(2) }}</span>
				</div>
			</div>
			<div class="actions">
				<button @click="goToRecharge" class="recharge-btn">
					<i class="fa fa-plus-circle"></i>
					<span>立即充值</span>
				</button>
				<button @click="goBack" class="cancel-btn">
					<i class="fa fa-arrow-left"></i>
					<span>选择其他支付方式</span>
				</button>
			</div>
		</div>

		<!-- 支付确认 -->
		<div v-else class="payment-confirm">
			<div class="confirm-details">
				<div class="detail-item">
					<div class="detail-label">
						<i class="fa fa-credit-card"></i>
						<span>支付金额</span>
					</div>
					<span class="pay-amount">¥{{ orderData.orderTotal?.toFixed(2) || '0.00' }}</span>
				</div>
				<div class="detail-divider"></div>
				<div class="detail-item">
					<div class="detail-label">
						<i class="fa fa-wallet"></i>
						<span>支付后余额</span>
					</div>
					<span class="remaining-balance" :class="{ 'negative': remainingBalance < 0 }">
						¥{{ remainingBalance.toFixed(2) }}
					</span>
				</div>
				<div v-if="isVipUser && overdraftNeeded > 0" class="detail-item overdraft-notice">
					<div class="detail-label">
						<i class="fa fa-info-circle"></i>
						<span>将使用透支额度</span>
					</div>
					<span class="overdraft-used">¥{{ overdraftNeeded.toFixed(2) }}</span>
				</div>
			</div>
		</div>

		<!-- 操作按钮 -->
		<div v-if="!isInsufficientBalance" class="action-buttons">
			<button class="cancel-btn" @click="goBack" :disabled="isProcessing">
				<i class="fa fa-times"></i>
				<span>取消支付</span>
			</button>
			<button
				class="confirm-btn"
				@click="confirmPayment"
				:disabled="isProcessing"
			>
				<span v-if="isProcessing" class="processing">
					<i class="fa fa-spinner fa-spin"></i>
					<span>支付处理中...</span>
				</span>
				<span v-else class="confirm-content">
					<i class="fa fa-check-circle"></i>
					<span>确认支付</span>
					<span class="pay-price">¥{{ orderData.orderTotal?.toFixed(2) || '0.00' }}</span>
				</span>
			</button>
		</div>

		<!-- 加载状态 -->
		<div v-if="isLoading" class="loading">
			<p>加载中...</p>
		</div>

		<!-- 错误提示 -->
		<div v-if="errorMsg" class="error-msg">
			<p>{{ errorMsg }}</p>
		</div>

		<!-- 底部菜单 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';
import axios from 'axios';

export default {
	name: 'WalletPayment',
	components: {
		Footer
	},
	data() {
		return {
			orderId: this.$route.query.orderId,
			orderData: {},
			walletData: {
				balance: 0,
				frozenBalance: 0,
				overdraftLimit: 0,
				totalBalance: 0
			},
			isVipUser: false,
			isLoading: false,
			isProcessing: false,
			errorMsg: ''
		};
	},
	computed: {
		// 计算可用余额（包括透支额度）
		availableBalance() {
			const balance = this.walletData.balance || 0;
			if (this.isVipUser) {
				// VIP用户：可用余额 = 当前余额 + 透支额度(1000元)
				// 如果余额为负，说明已使用透支，需要计算剩余透支额度
				if (balance < 0) {
					// 已使用透支，剩余可用 = 透支额度 - 已使用的透支金额
					const usedOverdraft = Math.abs(balance);
					return 1000 - usedOverdraft;
				} else {
					// 余额为正，可用余额 = 余额 + 透支额度
					return balance + 1000;
				}
			}
			return balance;
		},
		// 检查余额是否不足（考虑透支额度）
		isInsufficientBalance() {
			const orderTotal = this.orderData.orderTotal || 0;
			return this.availableBalance < orderTotal;
		},
		// 计算支付后余额
		remainingBalance() {
			const orderTotal = this.orderData.orderTotal || 0;
			const currentBalance = this.walletData.balance || 0;
			return currentBalance - orderTotal;
		},
		// 计算需要使用的透支额度
		overdraftNeeded() {
			const orderTotal = this.orderData.orderTotal || 0;
			const currentBalance = this.walletData.balance || 0;
			if (currentBalance < orderTotal && this.isVipUser) {
				return orderTotal - currentBalance;
			}
			return 0;
		}
	},
	methods: {
		async loadData() {
			this.isLoading = true;
			this.errorMsg = '';
			try {
				const token = localStorage.getItem('id_token');
				if (!token) {
					this.$router.push('/login');
					return;
				}

				// 获取订单详情
				const orderResponse = await axios.get(`orders/${this.orderId}`, {
					headers: {
						'Authorization': `Bearer ${token}`
					}
				});

				// 获取钱包余额
				const walletResponse = await axios.get('wallet/balance', {
					headers: {
						'Authorization': `Bearer ${token}`
					}
				});


				if (orderResponse.data.success && (orderResponse.data.code === 200 || orderResponse.data.code === 0)) {
					this.orderData = orderResponse.data.data;
				} else {
					this.errorMsg = '获取订单信息失败';
					return;
				}

				if (walletResponse.data.success && (walletResponse.data.code === 200 || walletResponse.data.code === 0)) {
					this.walletData = walletResponse.data.data;
					// 检查用户是否为VIP（优先使用isVip或vipUser字段，如果没有则检查权限）
					this.isVipUser = walletResponse.data.data.isVip || 
					                  walletResponse.data.data.vipUser || 
					                  walletResponse.data.data.user?.authorities?.some(auth => auth.name === 'VIP') || 
					                  false;
				} else {
					this.errorMsg = walletResponse.data?.message || '获取钱包信息失败';
					return;
				}

			} catch (error) {
				this.errorMsg = '网络错误，请重试';
			} finally {
				this.isLoading = false;
			}
		},
		async confirmPayment() {
			if (this.isProcessing) return;

			this.isProcessing = true;
			this.errorMsg = '';

			try {
				const token = localStorage.getItem('id_token');
				if (!token) {
					this.$router.push('/login');
					return;
				}

				// 调用钱包支付接口
				const response = await axios.post('wallet/pay-order', null, {
					headers: {
						'Authorization': `Bearer ${token}`
					},
					params: {
						orderId: parseInt(this.orderId)
					},
					timeout: 10000
				});

				if (response.data.success && (response.data.code === 200 || response.data.code === 0)) {
					// 支付成功，跳转到订单列表页
					this.$router.push({
						path: '/orderList',
						query: {
							paymentSuccess: 'true',
							message: '钱包支付成功'
						}
					});
				} else {
					this.errorMsg = response.data.message || '支付失败，请重试';
				}
			} catch (error) {
				this.errorMsg = '网络错误，请重试';
			} finally {
				this.isProcessing = false;
			}
		},
		goToRecharge() {
			// 跳转到充值页面，充值成功后可以返回继续支付
			this.$router.push({
				path: '/walletRecharge',
				query: { returnUrl: this.$route.fullPath }
			});
		},
		goBack() {
			// 返回到原支付页面
			this.$router.go(-1);
		}
	},
	mounted() {
		if (!this.orderId) {
			this.errorMsg = '订单信息缺失';
			return;
		}
		this.loadData();
	},
	activated() {
		// 当从充值页面返回时，自动刷新钱包余额
		if (this.orderId) {
			this.loadData();
		}
	},
	watch: {
		// 监听路由变化，如果是从充值页面返回，刷新余额
		'$route'(to, from) {
			if (from.path === '/walletRecharge' && this.orderId) {
				this.loadData();
			}
		}
	}
};
</script>

<style scoped>
.wrapper {
	padding-bottom: 60px;
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	background-attachment: fixed;
}

header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
	padding: 5vw 4vw;
	text-align: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

header::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		transform: scale(1);
		opacity: 0.5;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.8;
	}
}

header p {
	margin: 0;
	font-size: 4.5vw;
	font-weight: 600;
	position: relative;
	z-index: 1;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 订单信息确认 */
.order-confirm {
	background: #fff;
	margin: 4vw 3vw;
	border-radius: 3vw;
	padding: 5vw;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transition: transform 0.3s, box-shadow 0.3s;
}

.order-confirm:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 4vw;
	padding-bottom: 3vw;
	border-bottom: 2px solid #f0f0f0;
}

.section-header i {
	font-size: 5vw;
	color: #667eea;
	margin-right: 2vw;
}

.section-header h3 {
	margin: 0;
	font-size: 4.5vw;
	color: #333;
	font-weight: 600;
}

.order-info {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	border-radius: 2vw;
	padding: 4vw;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 3vw;
	padding: 2.5vw;
	background: #fff;
	border-radius: 1.5vw;
	transition: all 0.3s;
}

.info-item:last-child {
	margin-bottom: 0;
}

.info-item:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateX(2px);
}

.info-item.highlight {
	background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
	border: 2px solid #f39c12;
}

.info-label {
	display: flex;
	align-items: center;
	font-size: 3.5vw;
	color: #666;
}

.info-label i {
	margin-right: 1.5vw;
	color: #667eea;
	font-size: 4vw;
}

.info-value {
	font-size: 3.5vw;
	color: #333;
	font-weight: 500;
}

.amount {
	color: #e74c3c;
	font-weight: bold;
	font-size: 5vw;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* 钱包信息 */
.wallet-info {
	background: #fff;
	margin: 4vw 3vw;
	border-radius: 3vw;
	padding: 5vw;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transition: transform 0.3s, box-shadow 0.3s;
}

.wallet-info:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.payment-info {
	margin-top: 3vw;
}

.payment-method-card {
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 2.5vw;
	padding: 4vw;
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
}

.payment-method-card::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	animation: rotate 10s linear infinite;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.payment-method-card:hover {
	transform: scale(1.02);
	box-shadow: 0 8px 28px rgba(102, 126, 234, 0.5);
}

.wallet-icon {
	width: 12vw;
	height: 12vw;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 3vw;
	backdrop-filter: blur(10px);
	position: relative;
	z-index: 1;
}

.wallet-icon i {
	font-size: 6vw;
	color: #fff;
}

.payment-details {
	flex: 1;
	position: relative;
	z-index: 1;
}

.payment-title {
	font-size: 4.5vw;
	color: #fff;
	font-weight: 600;
	margin-bottom: 2vw;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.balance-info {
	display: flex;
	align-items: baseline;
	gap: 2vw;
}

.balance-label {
	font-size: 3vw;
	color: rgba(255, 255, 255, 0.9);
}

.balance-amount {
	color: #fff;
	font-weight: bold;
	font-size: 5vw;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.overdraft-tag {
	font-size: 2.5vw;
	color: rgba(255, 255, 255, 0.9);
	margin-left: 1vw;
	background: rgba(255, 255, 255, 0.2);
	padding: 0.5vw 1.5vw;
	border-radius: 1vw;
}

.overdraft-info {
	display: flex;
	align-items: baseline;
	gap: 2vw;
	margin-top: 2vw;
}

.overdraft-label {
	font-size: 3vw;
	color: rgba(255, 255, 255, 0.9);
}

.overdraft-amount {
	color: #fff;
	font-weight: bold;
	font-size: 4vw;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.payment-check {
	position: relative;
	z-index: 1;
}

.payment-check i {
	font-size: 6vw;
	color: #52c41a;
	background: #fff;
	border-radius: 50%;
	padding: 1.5vw;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 余额不足提示 */
.insufficient-balance {
	background: #fff;
	margin: 4vw 3vw;
	border-radius: 3vw;
	padding: 6vw;
	text-align: center;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	border: 2px solid #ffebee;
}

.warning-icon {
	width: 16vw;
	height: 16vw;
	background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 4vw;
	box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4);
	animation: pulse-warning 2s ease-in-out infinite;
}

@keyframes pulse-warning {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 4px 16px rgba(255, 107, 107, 0.4);
	}
	50% {
		transform: scale(1.05);
		box-shadow: 0 6px 24px rgba(255, 107, 107, 0.6);
	}
}

.warning-icon i {
	font-size: 8vw;
	color: #fff;
}

.insufficient-balance h3 {
	margin: 0 0 2vw 0;
	color: #e74c3c;
	font-size: 5vw;
	font-weight: 600;
}

.insufficient-balance p {
	margin: 0 0 5vw 0;
	color: #666;
	font-size: 3.5vw;
	line-height: 1.6;
}

.balance-comparison {
	background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
	border-radius: 2vw;
	padding: 4vw;
	margin-bottom: 5vw;
	border: 1px solid #ffcccc;
}

.comparison-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2.5vw;
	margin-bottom: 2vw;
	background: #fff;
	border-radius: 1.5vw;
	font-size: 3.5vw;
}

.comparison-item:last-child {
	margin-bottom: 0;
}

.comparison-item.deficit {
	background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
	border: 2px solid #ef5350;
}

.need-amount {
	color: #e74c3c;
	font-weight: bold;
	font-size: 4vw;
}

.current-amount {
	color: #3498db;
	font-weight: bold;
	font-size: 4vw;
}

.deficit-amount {
	color: #e74c3c;
	font-weight: bold;
	font-size: 4.5vw;
}

.overdraft-amount-display {
	color: #f39c12;
	font-weight: bold;
	font-size: 4vw;
}

.actions {
	display: flex;
	gap: 3vw;
}

.actions button {
	flex: 1;
	padding: 4vw 3vw;
	border: none;
	border-radius: 2.5vw;
	font-size: 4vw;
	cursor: pointer;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2vw;
	font-weight: 500;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.actions button i {
	font-size: 4.5vw;
}

.recharge-btn {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #fff;
}

.recharge-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.recharge-btn:active {
	transform: translateY(0);
}

.cancel-btn {
	background: #f5f5f5;
	color: #666;
}

.cancel-btn:hover {
	background: #e9ecef;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 支付确认 */
.payment-confirm {
	background: #fff;
	margin: 4vw 3vw;
	border-radius: 3vw;
	padding: 5vw;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.confirm-details {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	border-radius: 2.5vw;
	padding: 4vw;
	margin-bottom: 4vw;
	border: 2px solid #e0e7ff;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 3vw;
	background: #fff;
	border-radius: 1.5vw;
	margin-bottom: 2vw;
	transition: all 0.3s;
}

.detail-item:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	transform: translateX(2px);
}

.detail-item:last-child {
	margin-bottom: 0;
}

.detail-label {
	display: flex;
	align-items: center;
	font-size: 3.5vw;
	color: #666;
}

.detail-label i {
	margin-right: 1.5vw;
	color: #667eea;
	font-size: 4vw;
}

.detail-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, #ddd, transparent);
	margin: 2vw 0;
}

.pay-amount {
	color: #e74c3c;
	font-weight: bold;
	font-size: 5vw;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.remaining-balance {
	color: #27ae60;
	font-weight: bold;
	font-size: 4.5vw;
}

.remaining-balance.negative {
	color: #f39c12;
}

.overdraft-notice {
	background: linear-gradient(135deg, #fff9e6 0%, #ffeaa7 100%);
	border: 2px solid #f39c12;
}

.overdraft-notice .detail-label {
	color: #856404;
}

.overdraft-notice .detail-label i {
	color: #f39c12;
}

.overdraft-used {
	color: #f39c12;
	font-weight: bold;
	font-size: 4.5vw;
}

/* 操作按钮 */
.action-buttons {
	display: flex;
	gap: 3vw;
	margin: 4vw 3vw;
	position: sticky;
	bottom: 0;
	z-index: 10;
}

.action-buttons button {
	flex: 1;
	padding: 4.5vw 3vw;
	border: none;
	border-radius: 2.5vw;
	font-size: 4vw;
	cursor: pointer;
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2vw;
	font-weight: 600;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.action-buttons .cancel-btn {
	background: linear-gradient(135deg, #f5f5f5 0%, #e9ecef 100%);
	color: #666;
}

.action-buttons .cancel-btn:hover:not(:disabled) {
	background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.action-buttons .cancel-btn:active:not(:disabled) {
	transform: translateY(0);
}

.action-buttons .cancel-btn i {
	font-size: 4.5vw;
}

.action-buttons .confirm-btn {
	background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
	color: #fff;
	flex: 2;
	position: relative;
	overflow: hidden;
}

.action-buttons .confirm-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s;
}

.action-buttons .confirm-btn:hover:not(:disabled)::before {
	left: 100%;
}

.action-buttons .confirm-btn:hover:not(:disabled) {
	background: linear-gradient(135deg, #73d13d 0%, #52c41a 100%);
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(82, 196, 26, 0.4);
}

.action-buttons .confirm-btn:active:not(:disabled) {
	transform: translateY(0);
}

.action-buttons .confirm-btn:disabled {
	background: #ccc;
	cursor: not-allowed;
	box-shadow: none;
}

.confirm-content {
	display: flex;
	align-items: center;
	gap: 2vw;
	position: relative;
	z-index: 1;
}

.confirm-content i {
	font-size: 4.5vw;
}

.pay-price {
	font-size: 4.5vw;
	font-weight: 700;
	margin-left: 1vw;
}

.processing {
	display: flex;
	align-items: center;
	gap: 2vw;
	position: relative;
	z-index: 1;
}

.processing i {
	font-size: 4.5vw;
}

/* 加载和错误状态 */
.loading {
	text-align: center;
	padding: 8vw;
	color: #666;
	font-size: 4vw;
}

.loading::before {
	content: '';
	display: inline-block;
	width: 6vw;
	height: 6vw;
	border: 3px solid #f3f3f3;
	border-top: 3px solid #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-right: 2vw;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.error-msg {
	background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
	margin: 4vw 3vw;
	border-radius: 2.5vw;
	padding: 4vw;
	text-align: center;
	box-shadow: 0 4px 16px rgba(231, 76, 60, 0.2);
	border: 2px solid #ffcdd2;
}

.error-msg p {
	margin: 0;
	color: #e74c3c;
	font-size: 3.5vw;
	font-weight: 500;
}
</style>
